<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 图片速查 + 炫酷 JS 正方体</title>
    <!-- Bootstrap 3 CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <!-- 补充：让演示区域高一点 -->
    <style>
        .demo{ margin: 30px 0; text-align: center; }
        .cube-wrapper{ perspective:1200px; margin:60px auto; width:200px; height:200px; }
        .cube{ position:relative; width:200px; height:200px; transform-style:preserve-3d; animation:rotate 12s infinite linear; }
        .cube__face{ position:absolute; width:200px; height:200px; background:rgba(255,255,255,.95); border:2px solid #66afe9; backface-visibility:hidden; }
        .cube__face img{ width:100%; height:100%; object-fit:cover; display:block; }
        /* 6 个面分别定位 */
        .cube__face--front  { transform:translateZ(100px); }
        .cube__face--back   { transform:translateZ(-100px) rotateY(180deg); }
        .cube__face--right  { transform:rotateY(90deg) translateZ(100px); }
        .cube__face--left   { transform:rotateY(-90deg) translateZ(100px); }
        .cube__face--top    { transform:rotateX(90deg) translateZ(100px); }
        .cube__face--bottom { transform:rotateX(-90deg) translateZ(100px); }
        @keyframes rotate{ from{ transform:rotateX(0deg) rotateY(0deg); } to{ transform:rotateX(360deg) rotateY(360deg); } }
    </style>
</head>
<body>
<div class="container">
    <h2 class="page-header text-center">Bootstrap 3 图片特性速查 + 炫酷正方体</h2>

    <!-- 1. 响应式 -->
    <div class="panel panel-info">
        <div class="panel-heading"><strong>1️⃣ 响应式图片 (.img-responsive)</strong></div>
        <div class="panel-body">
            <p>本质：<code>max-width:100%; height:auto; display:block;</code> 让图片随父级缩放。</p>
            <img src="https://picsum.photos/800/400?random=1" class="img-responsive" alt="Responsive">
        </div>
    </div>

    <!-- 2. 形状 -->
    <div class="panel panel-warning">
        <div class="panel-heading"><strong>2️⃣ 图片形状（IE8 无圆角）</strong></div>
        <div class="panel-body demo">
            <img src="https://picsum.photos/200/200?random=2" class="img-rounded" alt="Rounded">
            <img src="https://picsum.photos/200/200?random=3" class="img-circle" alt="Circle">
            <img src="https://picsum.photos/200/200?random=4" class="img-thumbnail" alt="Thumbnail">
        </div>
    </div>

    <!-- 3. 炫酷正方体 -->
    <div class="panel panel-success">
        <div class="panel-heading"><strong>3️⃣ JS 立体正方体（鼠标可拖拽）</strong></div>
        <div class="panel-body">
            <div class="cube-wrapper" id="cubeWrapper">
                <div class="cube" id="cube">
                    <div class="cube__face cube__face--front"><img src="https://picsum.photos/200/200?random=5" alt=""></div>
                    <div class="cube__face cube__face--back"><img src="https://picsum.photos/200/200?random=6" alt=""></div>
                    <div class="cube__face cube__face--right"><img src="https://picsum.photos/200/200?random=7" alt=""></div>
                    <div class="cube__face cube__face--left"><img src="https://picsum.photos/200/200?random=8" alt=""></div>
                    <div class="cube__face cube__face--top"><img src="https://picsum.photos/200/200?random=9" alt=""></div>
                    <div class="cube__face cube__face--bottom"><img src="https://picsum.photos/200/200?random=10" alt=""></div>
                </div>
            </div>
            <p class="text-center text-muted">按住鼠标拖动可旋转正方体</p>
        </div>
    </div>
</div>

<!-- 简单的拖拽旋转逻辑 -->
<script>
    const wrapper=document.getElementById('cubeWrapper');
    const cube=document.getElementById('cube');
    let mouseX=0,mouseY=0,rotateX=-15,rotateY=0; // 初始倾斜角度
    let isDown=false;

    wrapper.addEventListener('mousedown',e=>{ isDown=true; mouseX=e.clientX; mouseY=e.clientY; });
    document.addEventListener('mouseup',()=>{ isDown=false; });
    document.addEventListener('mousemove',e=>{
        if(!isDown) return;
        const deltaX=e.clientX-mouseX;
        const deltaY=e.clientY-mouseY;
        rotateY+=deltaX*0.5;
        rotateX-=deltaY*0.5;
        cube.style.animation='none'; // 暂停自动旋转
        cube.style.transform=`rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
        mouseX=e.clientX; mouseY=e.clientY;
    });
</script>
</body>
</html>
